<script setup lang='ts'>

</script>

<template>
  <view class="form">
  <view class="form-item">
    <span class="label">起始时间</span>
    <view class="arrow">
      <span>2023/04/28</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
  <view class="form-item">
    <span class="label">结束时间</span>
    <view class="arrow">
      <span>2023/04/28</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
  <view class="form-item">
    <span class="label">支付公司</span>
    <view class="arrow">
      <span>不限</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
  <view class="form-item">
    <span class="label">结算情况</span>
    <view class="arrow">
      <span>全部</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
  <view class="form-item">
    <span class="label">导出结算记录</span>
    <view class="arrow">
      <button class="btn">导出</button>
    </view>
  </view>
</view>
  <view class="card">
    <view class="header">
      <view class="name">商户号：100068（李嘉欣）</view>
    </view>
    <view class="body">
      <view class="item">渠道：公帐</view>
      <view class="item">结算状态：<span class="success">打款成功</span></view>
      <view class="item">结算金额：8366.00</view>
      <view class="item">营业额：123344.00</view>
      <view class="item">手续费：37.00</view>
      <view class="item">打款日期：2024/06/25</view>
      <view class="item">结算交易日期：2024/06/25</view>
      <view class="item">结算时间：2024/06/25 10:23:19</view>
    </view>
  </view>
  <view class="card">
    <view class="header">
      <view class="name">商户号：100068（李嘉欣）</view>
    </view>
    <view class="body">
      <view class="item">渠道：公帐</view>
      <view class="item">结算状态：<span class="success">打款成功</span></view>
      <view class="item">结算金额：8366.00</view>
      <view class="item">营业额：123344.00</view>
      <view class="item">手续费：37.00</view>
      <view class="item">打款日期：2024/06/25</view>
      <view class="item">结算交易日期：2024/06/25</view>
      <view class="item">结算时间：2024/06/25 10:23:19</view>
    </view>
  </view>
  <view class="card">
    <view class="header">
      <view class="name">商户号：100068（李嘉欣）</view>
    </view>
    <view class="body">
      <view class="item">渠道：公帐</view>
      <view class="item">结算状态：<span class="success">打款成功</span></view>
      <view class="item">结算金额：8366.00</view>
      <view class="item">营业额：123344.00</view>
      <view class="item">手续费：37.00</view>
      <view class="item">打款日期：2024/06/25</view>
      <view class="item">结算交易日期：2024/06/25</view>
      <view class="item">结算时间：2024/06/25 10:23:19</view>
    </view>
  </view>

</template>

<style scoped lang='scss'>
.form {
  margin-bottom: 48rpx;
}
.label {
  width: 170rpx;
}
.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
  margin: 24rpx 32rpx;
}
.header {
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  padding: 22rpx 0;
  .name {
    font-size: 28rpx;
    font-weight: bold;
    position: relative;
    margin-left: 26rpx;
    &:before {
      content: '';
      width: 6rpx;
      height: 40rpx;
      position: absolute;
      left: -26rpx;
      background: #FF4638;
      border-radius: 3rpx 3rpx 3rpx 3rpx;
    }
  }
}
.body{
  padding: 24rpx 32rpx 34rpx;
  font-size: 24rpx;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12rpx;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  color: #303030;
  position: relative;
  b {
    color: #303030;
  }
  .item {
    &:last-child {
      width: 100%;
    }
    width: 50%;
    white-space: nowrap;
  }
  .success {
    color: #25DFA5;
  }
}
</style>